<!--
 * @Author: weikang
 * @Description: 
 * @Date: 2023-12-19 10:26:53
 * @LastEditTime: 2023-12-21 13:45:35
 * @FilePath: \lianyungang-dashborad\src\model\warningProcess.vue
-->
<template>
  <div class="model-panel">
    <my-title title="预警处置情况分析"></my-title>
    <div class="content-panel">
      <div class="data-list">
        <div class="data-item" v-for="(item, index) in dataList" :key="index">
          <img :src="item.icon" alt="" />
          <div class="right-content">
            <div class="year-content">
              本年{{ item.year.no_disposal }} /{{ item.year.disposal }}处置率
              {{ comparePer(item.year) }}%
            </div>
            <progress-bar :bgColor="item.bgColor" :percentage="comparePer(item.year)" />
            <div class="month-progress">
              <progress-bar :bgColor="item.bgColor" :percentage="comparePer(item.month)" />
            </div>
            <div class="month-content">
              本年{{ item.month.no_disposal }} /{{ item.month.disposal }}处置率
              {{ comparePer(item.month) }}%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MyTitle from "@/components/MyTitle.vue";
import progressBar from "@/components/progressBar.vue";
import { reactive } from "vue";
import { getWarningProcess } from "@/api/apis";
import { getAssetsFile } from "./utils";

const dataList = reactive([
  {
    icon: getAssetsFile("red.png"),
    type: "red",
    bgColor: "#FE0000",
    year: {
      disposal: 0,
      no_disposal: 0,
    },
    month: {
      disposal: 0,
      no_disposal: 0,
    },
  },
  {
    icon: getAssetsFile("orange.png"),
    type: "orange",
    bgColor: "#FE6600",
    year: {
      disposal: 0,
      no_disposal: 0,
    },
    month: {
      disposal: 0,
      no_disposal: 0,
    },
  },
  {
    icon: getAssetsFile("yellow.png"),
    type: "yellow",
    bgColor: "#FEC800",
    year: {
      disposal: 0,
      no_disposal: 0,
    },
    month: {
      disposal: 0,
      no_disposal: 0,
    },
  },
]);

const comparePer = (item) => {
  const result = (item.no_disposal / item.disposal) * 100;
  return Number.isInteger(result) ? result.toFixed(0) : result.toFixed(2);
};

getWarningProcess().then((res) => {
  const { data } = res;
  dataList.forEach((item) => {
    const value = data[item.type];

    item.year = value.year;
    item.month = value.month;
  });
});
</script>

<style lang="scss" scoped>
.model-panel {
  height: 320px;
  .data-list {
    padding: 0 24px;
    padding-top: 10px;
    .data-item {
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      .right-content {
        margin-left: 50px;
        flex-grow: 2;
        .year-content,
        .month-content {
          margin-bottom: 4px;
        }
      }
      img {
        width: 70px;
        height: 70px;
      }
    }
    .data-item + .data-item {
      margin-top: 24px;
    }
  }
}
.month-progress {
  margin-top: 4px;
  width: 60%;
}
</style>